<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="杨宁争">
    <title>唯品会- 全球精选，正品特卖！新品1折起，立即抢购！</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        body {
            overflow: hidden;
        }

        .nav-top {
            height: 28px;
            background-color: #f5f5f5;
            color: #777;
        }

        .container {
            width: 1170px;
            height: 28px;
            margin: 0 auto;
        }

        .nav-top-left {
            width: 87px;
            height: 28px;
            font-size: 12px;
            color: #555;
            float: left;
            line-height: 28px;
            padding: 0 14px 0 17px;
            position: relative;
        }

        .nav-top-right {

            height: 28px;
            background-color: #f5f5f5;
            float: right;
        }

        .nav-top-right-title {
            float: left;
            font-size: 12px;
            line-height: 28px;
            padding-left: 13px;
            padding-right: 20px;
        }

        .hn {
            cursor: pointer;
        }

        .hn-text {
            margin-right: 12px;
        }

        .icon {
            display: inline-block;
            width: 150px;
            height: 598px;
            background-image: url(./img/1.png);
        }

        .icon1 {
            width: 10px;
            height: 6px;
            background-position: -59px 0;
            vertical-align: middle;
        }

        .icon2 {
            width: 8px;
            height: 8px;
            background-position: -159px 0;
            vertical-align: middle;
        }

        .icon3 {
            width: 10px;
            height: 8px;
            background-position: -60px -0px;
            vertical-align: middle;
        }

        .icon4 {
            width: 10px;
            height: 8px;
            background-position: -59px -0px;
            vertical-align: middle;
        }

        .icon5 {
            width: 12px;
            height: 8px;
            background-position: -59px -0px;
            vertical-align: middle;
        }

        .icon6 {
            width: 10px;
            height: 10px;
            background-position: -59px -0px;
            vertical-align: middle;
        }

        .icon7 {
            width: 10px;
            height: 8px;
            background-position: -113px 0px;
            vertical-align: middle;
        }

        .nav-top-right-title:hover .icon3 {
            transform: rotate(180deg);
        }

        .shouye .seven:hover .icon7 {
            transform: rotate(180deg);
        }

        .nav-top-right-title:hover .icon4 {
            transform: rotate(180deg);
        }

        .nav-top-right-title:hover .icon5 {
            transform: rotate(180deg);
        }

        .nav-top-right-title:hover .icon6 {
            transform: rotate(180deg);
        }

        .nav-top-left:hover .icon1 {
            transform: rotate(180deg);
        }

        .nav-top-left:hover {
            /*border-left: 1px solid #cdcdcd;
            border-right: 1px solid #cdcdcd;*/
        }

        .nav-top-left-text {
            width: 320px;
            border: 1px solid #cdcdcd;
            position: absolute;
            left: 0px;
            display: none;
        }

        .nav-top-right-title-one {
            width: 300px;
            height: 180px;
            border: 1px solid #cdcdcd;

            position: absolute;

            display: none;
        }

        .nav-top-right-title:hover .nav-top-right-title-one {
            display: inherit;
        }

        .nav-top-left:hover .nav-top-left-text {
            display: inherit;
        }

        .sab-table {
            width: 280px;
            display: block;
            margin: 0 auto;
            padding-left: 4px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px dotted #666;
            font-weight: 700;
            text-align: left;
            color: #000;
            font-size: 14px;
        }

        .sab-tablea {
            width: 280px;
            height: 30px;
            border-bottom: 1px dotted #cdcdcd;
            position: absolute;
            text-align: center;
            top: 30px;
        }

        .box {
            display: flex;
            justify-content: space-around;
            margin-top: 40px;
        }

        .box-left {


            width: 100px;
            height: 150px;
        }

        .box-rifht {

            width: 100px;
            height: 150px;
        }


        .box-left li:hover,
        .box-rifht li:hover {
            color: #f1037f;
        }

        .sab-tablea:hover {
            color: #f1037f;
        }

        .box li:hover {
            color: #f1037f;
            cursor: pointer;
        }

        .nav-top-right-title-one .sab-tablea {
            cursor: pointer;
        }

        table {
            margin: 0 auto;
            width: 280px;
        }



        th {
            height: 26px;
            width: 20px;
            text-align: left;
            font-weight: 100;
        }

        td {
            text-align: left;
        }

        .span-item {
            cursor: pointer;
            padding: 2px 5px;
            color: #676767;
            margin-right: 3px;
        }

        .span-item:hover {
            color: #f1037f;
        }

        .nav-top-right-title a:hover {
            color: #f1037f;
        }

        .nav-top-right-title a {
            margin-right: 12px;
        }

        .nav-top-right-title-two {
            width: 450px;
            height: 150px;
            border: 1px solid #cdcdcd;
            margin-left: -200px;

            position: absolute;
            display: none;
        }

        .nav-top-right-title:hover .nav-top-right-title-two {
            display: block;
        }

        .dayshu {
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
            border-bottom: 0.5px solid #cdcdcd;
        }

        .bottom {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }

        .second {
            width: 75px;
            height: 28px;
            background-color: #f1037f;
            text-align: center;
            border-radius: 5px;
            color: white;
            cursor: pointer;
        }

        .temai {
            width: 130px;
            height: 170px;
            border: 1px solid #cdcdcd;
            position: absolute;
            top: 0px;
            margin-left: -18px;

            display: none;
        }

        .temai li {
            margin-left: 20px;
            margin-top: 5px;
            padding-top: 20px;
            cursor: pointer;
        }

        .temai li:hover {
            color: #f1037f;
        }

        .nav-top-right-title:hover .nav-top-right-title-three .temai {
            display: block;
        }

        .julebu {
            width: 100px;
            height: 160px;
            border: 1px solid #cdcdcd;
            position: absolute;
            top: 0px;
            margin-left: -18px;

            display: none;
        }

        .julebu li {
            margin-left: 20px;
            margin-top: 5px;
            padding-top: 20px;
            cursor: pointer;
        }

        .julebu li:hover {
            color: #f1037f;
        }

        .nav-top-right-title:hover .julebu {
            display: block;
        }

        .kehu {
            width: 110px;
            height: 210px;
            border: 1px solid #cdcdcd;
            position: absolute;
            top: 15px;
            margin-left: -18px;
            margin-top: 0px;

            display: none;
        }

        .kehu li {
            margin-left: 20px;
            margin-top: 15px;
            padding-top: -5px;
            cursor: pointer;
        }

        .kehu li:hover {
            color: #f1037f;
        }

        .nav-top-right-title:hover .kehu {
            display: block;
        }

        .tupian {
            width: 180px;
            height: 240px;
            border: 1px solid #cdcdcd;
            position: absolute;
            top: 25px;
            margin-left: -100px;
           
            display: none;
        }

        .tupian p {
            font-weight: 900;
            bottom: -200px;
            text-align: center;
            position: relative;
            cursor: pointer;
        }

        .tupian p:hover {
            color: #f1037f;
        }

        .tupian img {
            width: 150px;
            height: 150px;
            position: absolute;
            top: calc(50% - 80px);
            left: calc(50% - 75px);
            cursor: pointer;
        }

        .nav-top-right-title:hover .tupian {
            display: block;
        }

        .head-logo {
            width: 1903px;
            height: 100px;
            background-color: #fff;
        }

        .both {
            width: 1200px;
            height: 100px;
            margin: 0 auto;

            display: flex;
            justify-content: space-around;
        }

        .lef {
            display: flex;
            justify-content: space-around;
            width: 280px;
            height: 100px;
        }

        .lef img {

            left: -250px;
            position: relative;
            width: 200px;

            height: 100px;
        }

        .biaoqian {
            display: flex;
            justify-content: space-around;
            width: 126px;
            height: 100px;
        }

        .biaoqian img {
            width: 126px;
            margin-left: 40px;
        }

        .back {
            width: 100%;
            height: 40px;
            background-color: #f8007f;
            z-index: 999;
        }

        .nav-second {
            float: left;
            width: 800px;
            background-color: #f8007f;
        }

        .nav-second li a {
            color: white;
            padding: 0 10px;
            line-height: 40px;
            left: 40px;
        }

        .nav-second li {
            float: left;
            height: 40px;
        }

        .nav-second li:hover {
            background-color: #b7146a;
        }

        .nav-second-right {
            display: flex;
            justify-content: right;
            background-color: #f8007f;
        }

        .nav-second-right li {
            height: 40px;
        }

        .nav-second-right li a {
            color: white;
            padding: 0 10px;
            position: relative;
            top: -12px;
        }

        .nav-second-right img {
            height: 40px;
        }

        .nav-second-right>li:hover {
            background-color: #b7146a;
        }



        .content-list li {
            width: 170px;
            height: 96px;
            float: left;

            margin: 10px;
            position: relative;

            background-color: #fcfcfc;
        }

        .content-box {
            width: 580px;
            height: 250px;
            background-color: #fcfcfc;
            position: absolute;
            left: 370px;
            z-index: 999;
            display: none;
        }

        .more-move:hover .content-box {
            display: block;
        }

        .corver {
            width: 170px;
            height: 96px;
            background: -webkit-linear-gradient(bottom, #eee, black);
            opacity: 0;
            position: absolute;
            top: 0;
            left: 10px;
            transition: all 0.3s;
        }

        .content-list li:hover .corver {
            opacity: 0.5;
        }

        .corver-info {
            width: 170px;
            position: absolute;
            top: 100%;
            left: 50%;
          
            opacity: 0;
        }

        .content-list li:hover .corver-info {
            top: 30%;
            transition: all 0.3s;
            opacity: 1;
        }

        .lunbo-back {
            width: 100%;
            height: 500px;
            background-image: url('img/beijing.jpg');
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .lunbo-container {
            width: 1140px;
            margin: 0 auto;
            text-align: center;
        }

        .lunbo-container .banner-info {

            padding-top: 50px;
        }

        .lunbo-container .img-list img {
            width: 1110px;
            height: 340px;
        }

        .img-list li {
            display: none;
        }

        .banner .img-list li.current {
            display: block;
        }

        .banner-info {
            position: relative;
        }

        .indicator-info {

            height: 60px;
        }

        .indicator {
            display: flex;
            justify-content: space-around;
            line-height: 60px;
        }

        .active {
            display: inline-block;
            color: #f8007f;
            border-bottom: 3px solid #f8007f;
            transition: all  0.2s linear;
        }

        .container-hot {
            width: 1903px;
            height: 158px;
            background-color: #f5f5f5;
            padding: 8px 0 20px;
        }

        .hot-img {
            width: 1200px;
            height: 130px;
            margin: 0 auto;
        }

        .zhuanshu-img {
            margin-right: 30px;
            float: left;
        }

        .zhuanshu-img img {
            width: 370px;
            height: 130px;
        }



 

   

        .right-nav {
            height: 100%;
            width: 35px;
            background-color: #262626;
            position: fixed;
            top: 0;
            right: 0;
        }

        .right-nav li {
            color: #fcfcfc;
        }

        .right-nav .zhanghao {
            display: inline-block;
            width: 35px;
            height: 45px;
            background-image: url('./img/qq.png');
            background-position: 0 -125px;
        }
        .zhaohao-list-img .xiaoren{
            display: inline-block;
            width: 65px;
            height: 65px;
            background-image: url('./img/xiaoren.jpg');
          
        }

        .right-nav .gouwudai {
            display: inline-block;
            width: 35px;
            height: 45px;
            background-image: url('./img/qq.png');
            background-position: -80px -128px;
        }

        .right-nav .quan {
            display: inline-block;
            width: 30px;
            height: 40px;
            background-image: url('./img/qq.png');
            background-position: -165px -47px;
            margin-left: 5px;
        }

        .right-nav .xin {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-image: url('./img/qq.png');
            background-position: -134px -173px;
            margin-left: 5px;
        }

        .right-nav .wuxin {
            display: inline-block;
            width: 30px;
            height: 25px;
            background-image: url('./img/qq.png');
            background-position: -125px 0;
            margin-left: 5px;
        }

        .right-nav .zuji {
            display: inline-block;
            width: 30px;
            height: 25px;
            background-image: url('./img/qq.png');
            background-position: -160px 0;
        }

        .right-nav .right-nav-list {
            position: relative;
            top: 200px;
        }

        .right-nav-list li {
            padding: 10px 0;
        }

        .right-nav .fankui {
            display: inline-block;
            width: 30px;
            height: 25px;
            background-image: url('./img/qq.png');
            background-position: -126px -94px;
            margin-left: 5px;
        }

        .right-nav .backtotop {
            display: inline-block;
            width: 35px;
            height: 18px;
             background-position: -90px -102px;
            background-image: url('./img/qq.png');
           
        }

        .right-nav .right-nav-list-bottom {
            position: relative;
            top: 350px;
        }

        .right-nav li:hover {
            background-color: #df147f;
        }

        .zhaohao-list {
            width: 275px;
            height: 306px;
            background-color: #fcfcfc;
            position: absolute;
            right: 35px;
            top: 0;
            font-size: 12px;
            display: none;
        }

        .zhaohao-list-img span {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-image: url('./img/qq.png');
            background-position: 0 -180px;
            position: relative;
            left: 120px;
            top: 50px;
        }

        .zhaohao-list-img p {
            display: inline-block;
            position: relative;
            left: 10px;
            top: 100px;
        }

        .zhaohao-tu {
            width: 275px;
            height: 100px;
            background-color: lightgrey;
            position: relative;
            top: 100px;
        }

        .zhaohao-tu li {
            width: 130px;
            float: left;
            text-align: center;
        }

        .zhaohao-tu a:hover {
            color: #b7146a;
        }

        .zhaohao-tu .my-dingdan {
            display: inline-block;
            width: 28px;
            height: 35px;
            background-image: url('./img/qq.png');
            background-position: -198px -88px;
        }

        .zhaohao-tu .my-info {
            display: inline-block;
            width: 28px;
            height: 33px;
            background-image: url('./img/qq.png');
            background-position: -198px -57px;
        }

        .zhaohao-vip {
            height: 20px;
            position: relative;
            bottom: -120px;
            left: 180px;
        }

        .right-nav-list-zhaohao:hover .zhaohao-list {
            display: block;
        }

        .right-list {
            width: 200px;
            height: 40px;
            background-color: #fcfcfc;
            position: absolute;
            right: 35px;
            top: 250px;
            text-align: center;
            display: none;
        }

        .right-list1 {
            width: 200px;
            height: 40px;
            background-color: #fcfcfc;
            position: absolute;
            right: 35px;
            top: 320px;
            display: none;
        }

        .right-list2 {
            width: 200px;
            height: 40px;
            background-color: #fcfcfc;
            position: absolute;
            right: 35px;
            top: 360px;
            display: none;
        }

        .right-list3 {
            width: 200px;
            height: 40px;
            background-color: #fcfcfc;
            position: absolute;
            right: 35px;
            top: 410px;
            display: none;
        }
       .right-list4 {
            width: 200px;
            height: 40px;
            background-color: white;
            position: absolute;
            right: 35px;
            top: 30px;
            display: none;
        }
           .right-list5 {
            width: 200px;
            height: 40px;
            background-color: white;
            position: absolute;
            right: 35px;
            top: 65px;
            margin-left: 20px;
            display: none;
        }
        .right-nav li:hover .right-list {
            display: block;
        }

        .right-nav li:hover .right-list1 {
            display: block;
        }

        .right-nav li:hover .right-list2 {
            display: block;
        }

        .right-nav li:hover .right-list3 {
            display: block;
        }

            .right-nav-list-bottom li:hover .right-list4 {
            display: block;
        }
    .right-nav-list-bottom li:hover .right-list5 {
            display: block;
        }
        .new-shop {
            float: left;
        }

        .new-shop li {
            padding: 0 19px;
            float: left;
        }

        .new-shop li:hover {
            opacity: 0.5;
        }

        .new-shop span {
            position: relative;
            left: -80px;
            top: 10px;
        }

        .new-shop-info {
            float: left;
        }

        .new-shop-info li {
            padding: 0 49px;
            float: left;
        }

        .clothes {
            float: left;
            height: 400px;
        }

        .clothes li {
            padding: 0 10px;
            float: left;
        }

        .clothes-info {
            position: relative;
            top: -150px;
        }

        .clothes-info li {
            text-align: center;
            
            background-color: white;
            height: 130px;
            width: 130px;
            border-radius: 10px;
            margin: 0 5px;
            background-color: lightskyblue
        }

        .clothes-info li img {
            position: relative;
            top: 30px;
        }

        .clothes-info img:hover {
            opacity: 0.5;
        }

        .clothes-info-list {
            position: relative;
            top: -180px;
            height: 20px;
        }

        .clothes-info-list li {
            padding: 0 43px;
         
        }

        .clothes-info-list2 {
            position: relative;
            top: -180px;
            height: 20px;
        }

        .clothes-info-list2 li {
            padding: 0 38px;
        }

        .jingxuan-list {
            float: left;
        }

        .jingxuan-list li {
            padding: 10px 15px;
            float: left;
            position: relative;
        }

        .jingxuan-clothes {
            height: 300px;
            width: 520px;
            border-radius: 10px;
            background-color: white;
            position: absolute;
            top: 30px;
            left: 40px;
            display: none;
        }

        .jingxuan-list li:hover .jingxuan-clothes {
            /* transition: all 0.5s linear; */
            box-shadow: 0 0 10px black;
            display: block;
        }

        .jingxuan-clothes img {
            height: 150px;
            width: 120px;
            position: relative;
            top: 30px;
            left: 30px;
        }

        .jingxuan-clothes img:hover {
            opacity: 0.5;
        }

        .jingxuan-clothes-bottom {
            position: relative;
            top: 200px;
            /* background-color: tan; */
            border-top: 1px dotted #aaa;
            height: 100px;
        }

        .jingxuan-clothes-bottom button {
            /* background-color: rebeccapurple; */
            border: 1px solid black;
            width: 140px;
            height: 40px;
            text-align: center;
            position: relative;
            top: -150px;
            left: 350px;
            border-radius: 5px;
        }

        .jingxuan-clothes-bottom button:hover {
            color: white;
            background-color: #262626;
        }
    </style>
</head>

<body>
    <nav class="nav-top">
        <div class="container">
            <div class="nav-top-left">
                <div class="hn">
                    <span class="hn-text">河南</span>
                    <span class="icon icon1"></span>
                </div>
                <div class="nav-top-left-text">
                    <span class="sab-table">请选择所在的收货地区</span>
                    <table>
                        <tbody>
                            <tr>
                                <th>A</th>
                                <td>
                                    <span class="span-item">安徽</span>
                                    <span class="span-item">澳门</span>
                                </td>
                            </tr>
                            <tr>
                                <th>B</th>
                                <td>
                                    <span class="span-item">北京</span>
                                </td>
                            </tr>
                            <tr>
                                <th>C</th>
                                <td>
                                    <span class="span-item">重庆</span>
                                </td>
                            </tr>
                            <tr>
                                <th>F</th>
                                <td>
                                    <span class="span-item">福建</span>
                                </td>
                            </tr>
                            <tr>
                                <th>G</th>
                                <td>
                                    <span class="span-item">广东</span>
                                    <span class="span-item">广西</span>
                                    <span class="span-item">甘肃</span>
                                    <span class="span-item">贵州</span>
                                </td>
                            </tr>
                            <tr>
                                <th>H</th>
                                <td>
                                    <span class="span-item">河北</span>
                                    <span class="span-item" style="background-color: #f1037f; color:white;">河南</span>
                                    <span class="span-item">黑龙江</span>
                                    <span class="span-item">海南</span>
                                    <span class="span-item">湖北</span>
                                    <span class="span-item">湖南</span>

                                </td>
                            </tr>
                            <tr>
                                <th>J</th>
                                <td>
                                    <span class="span-item">江苏</span>
                                    <span class="span-item">吉林</span>
                                    <span class="span-item">江西</span>

                                </td>
                            </tr>
                            <tr>
                                <th>L</th>
                                <td>
                                    <span class="span-item">辽宁</span>
                                </td>
                            </tr>
                            <tr>
                                <th>N</th>
                                <td>
                                    <span class="span-item">宁夏</span>
                                    <span class="span-item">内蒙古</span>
                                </td>
                            </tr>
                            <tr>
                                <th>Q</th>
                                <td>
                                    <span class="span-item">青海</span>
                                </td>
                            </tr>
                            <tr>
                                <th>S</th>
                                <td>
                                    <span class="span-item">上海</span>
                                    <span class="span-item">山东</span>
                                    <span class="span-item">山西</span>
                                    <span class="span-item">四川</span>
                                    <span class="span-item">陕西</span>
                                </td>
                            </tr>
                            <tr>
                                <th>T</th>
                                <td>
                                    <span class="span-item">台湾</span>
                                    <span class="span-item">天津</span>

                                </td>
                            </tr>
                            <tr>
                                <th>X</th>
                                <td>
                                    <span class="span-item">西藏</span>
                                    <span class="span-item">香港</span>
                                    <span class="span-item">新疆</span>
                                </td>
                            </tr>
                            <tr>
                                <th>Y</th>
                                <td>
                                    <span class="span-item">云南</span>
                                </td>
                            </tr>
                            <tr>
                                <th>Z</th>
                                <td>
                                    <span class="span-item">浙江</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>


                </div>
            </div>
            <div class="nav-top-right">
                <ul>
                    <li class="nav-top-right-title"><a href="#">请登录</a>/
                        <div class="nav-top-right-title-one">
                            <span class="icon icon1"></span>
                            <span class="sab-tablea">
                                     你好！[请登录]

                                 </span>

                            <div class="box ">
                                <ul class="box-left ">
                                    <li>我的收藏</li>
                                    <li>零钱</li>
                                    <li>我的唯品币</li>
                                </ul>

                                <ul class="box-rifht ">
                                    <li>我的订单</li>
                                    <li>我的优惠券</li>
                                    <li>唯品金融</li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="nav-top-right-title "><a href="# ">注册</a>/</li>
                    <li class="nav-top-right-title "><span class=" icons"></span><a href="# ">签到有礼</a>/
                        <div class="nav-top-right-title-two ">
                            <span class="icon icon1 "></span>
                            <span class=" tianshu ">
                                        <ul class="dayshu">
                                            <li>1天</li>
                                            <li>2天</li>
                                            <li>3天</li>
                                            <li>4天</li>
                                            <li>5天</li>
                                            <li>6天</li>
                                            <li>7天</li>
                                        </ul>
                                    </span>
                            <div class="bottom">
                                <span class="first">
                                         <a href="">   每天签到送惊喜,&nbsp&nbsp连续签到更享心动奖励</a>
                                        </span>
                                <span class="second">签到</span>
                            </div>




                        </div>
                    </li>
                    <li class="nav-top-right-title "><a href="# ">我的订单</a>/</li>
                    <li class="nav-top-right-title "><a href="# ">我的特卖 <span class="icon icon3"></span> </a>/
                        <div class="nav-top-right-title-three ">

                            <ul class="temai">
                                <li>品牌收藏(0)</li>
                                <li>商品收藏(0)</li>
                                <li>我的足迹(0)</li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-top-right-title "><a href="# ">会员俱乐部<span class="icon icon4"></span> </a>/
                        <div class="nav-top-right-title-four ">

                            <ul class="julebu">
                                <li>俱乐部首页</li>
                                <li>唯品币兑换</li>
                                <li>免费抽大奖</li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-top-right-title "><a href="# ">客户服务<span class="icon icon5"></a>/

                        <div class="nav-top-right-title-five ">

                            <ul class="kehu">
                                <li>联系客服</li>
                                <li>帮助中心</li>
                                <li>服务中心</li>
                                <li>知识产权投诉</li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-top-right-title "><span class="icons1"></span><a href="# ">手机版</a>/
                        <span class="tupian">
                        <img src="./img/wei.jpg" alt="">

                        <p><strong>随时逛 及时抢</strong></p>
                    </span>
                    </li>
                    <li class="nav-top-right-title "><a href="# ">更多<span class="icon icon6"></a></li>
                </ul>
            </div>
    </nav>

    <div class="head-logo">
        <div class="both">
            <div class="lef">
                <a href="">  <img src="./img/weiping.png" alt=""></a>
            </div>
            <div class="righ">
                <ul class="biaoqian">
                    <li> <a href=""><img src="./img/a.png" alt=""></a> </li>
                    <li> <a href=""><img src="./img/b.png" alt=""></a> </li>
                    <li> <a href=""><img src="./img/c.png" alt=""></a> </li>
                    <!--<li>  <a href=""><img src="./img/weiping.png" alt=""></a>   </li>-->
                </ul>
            </div>
        </div>
    </div>
    <div class="back">
        <div class="container">
            <ul class="nav-second">
                <li style="background-color:#b7146a;"><a href="#">首页</a></li>
                <li><a href="#">唯品国际</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#">家居家电</a></li>
                <li><a href="#">男士</a></li>
                <li><a href="#">美妆</a></li>
                <li><a href="#">生活超市</a></li>
                <li><a href="#">金融</a></li>
                <li class="more-move"><a href="#">更多<span class="list-icon"></span></a>
                    <div class="content-box">
                        <ul class="content-list">
                            <li style="background-color: #fcfcfc;">
                                <a href="#">
                                    <img src="./img/A.jpg" alt="">
                                    <div class="corver"></div>
                                    <div class="corver-info">
                                        <h3>女装</h3>
                                    </div>
                                </a>
                            </li>
                            <li style="background-color: #fcfcfc;">
                                <a href="#">
                                    <img src="img/B.jpg" alt="">
                                    <div class="corver"></div>
                                    <div class="corver-info">
                                        <h3>鞋包</h3>
                                    </div>
                                </a>
                            </li>
                            <li style="background-color: #fcfcfc;">
                                <a href="#">
                                    <img src="img/C.jpg" alt="">
                                    <div class="corver"></div>
                                    <div class="corver-info">
                                        <h3>配饰</h3>
                                    </div>
                                </a>
                            </li>
                            <li style="background-color: #fcfcfc;">
                                <a href="#">
                                    <img src="img/D.jpg" alt="">
                                    <div class="corver"></div>
                                    <div class="corver-info">
                                        <h3>运动</h3>
                                    </div>
                                </a>
                            </li>
                            <li style="background-color: #fcfcfc;">
                                <a href="#">
                                    <img src="img/E.jpg" alt="">
                                    <div class="corver"></div>
                                    <div class="corver-info">
                                        <h3>唯品·奢</h3>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

            </ul>
            <ul class="nav-second-right">
                <li><img src="./img/FEN.png" alt=""><a href="#">分类</a></li>
                <li><img src="./img/W.png" alt=""><a href="#">预告</a></li>
            </ul>

        </div>
    </div>
    <div class="lunbo-back clearfix">
        <div class="lunbo-container">
            <div class="banner">
                <div class="banner-info">
                    <ul class="img-list">
                        <li class="current"><a href="#"><img src="img/lunbo02.jpg" alt=""></a></li>
                        <li><a href="#"><img src="img/lunbo.jpg""alt"></a></li>
                        <li><a href="#"><img src="img/lunbo.4.jpg" alt=""></a></li>
                        <li><a href="#"><img src="img/lunbo4.jpg" alt=""></a></li>
                    </ul>
                </div>
                <div class="indicator-info">
                    <ul class="indicator">
                        <li class="active"><a href="#">欧莱雅vip大牌日</a></li>
                        <li><a href="#">时尚风景 最高满199减40</a></li>
                        <li><a href="#">居家夏末 福利大派发</a></li>
                        <li><a href="#">全球早秋扫货指南</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container-hot">
        <div class="hot-img">

            <div class="zhuanshu-img">
                <a href=""><img src="img/myde.jpg" alt=""></a>
            </div>



            <div class="zhuanshu-img">
                <a href=""><img src="img/shi.jpg" alt=""></a>
            </div>


            <div class="zhuanshu-img">
                <a href=""><img src="img/guoji.jpg" alt=""></a>
            </div>

        </div>
    </div>

    <!--右侧导航条-->
    <div class="right-nav">
        <ul class="right-nav-list">
            <li class="right-nav-list-zhaohao"><a href="#"><span class="zhanghao"></span></a>
                <div class="zhaohao-list">
                    <div class="zhaohao-list-img">
                        <span class="xiaoren"></span>
                        <p style="color:#000;">您好！请 <a href="" style="color:#df147f;">登录 </a>|<a href="" style="color:#df147f;"> 注册</a></p>
                    </div>
                    <ul class="zhaohao-tu">
                        <li style="background-color:#aaa;"><span class="my-dingdan"></span>
                            <a href="">
                                <p>我的订单</p>
                        </li>
                        </a>
                        <li style="background-color:#aaa;"><span class="my-info"></span>
                            <a href="">
                                <p>我的消息</p>
                        </li>
                        </a>
                        </section>

                    </ul>
                    <div class="zhaohao-vip">
                        <a href="" style="color:lightskyblue;">
                            <p>会员俱乐部</p>
                        </a>
                    </div>
                </div>
            </li>
            <li style="background-color:#df147f; height:180px;"><a href="#"><span class="gouwudai"></span><p style="font-size:18px;padding-left:10px;">购物袋</p><p style="font-size:18px;padding-left:5px;background-color:white;border-radius:50%; color:#df147f;height:20px;width:20px;margin:10px;">0</p></a></li>
            <li><a href="#"><span class="quan"></span></a>
                <div class="right-list">
                    <a href="" style="color:black;font-size:18px;line-height:40px; text-align: center;">
                        <p>我的优惠券</p>
                    </a>
                </div>
            </li>
            <li><a href="#"><span class="xin"></span></a>
                <div class="right-list1">
                    <a href="" style="color:black;font-size:18px;line-height:40px; text-align: center;">
                        <p>品牌收藏</p>
                    </a>
                </div>
            </li>
            <li><a href="#"><span class="wuxin"></span></a>
                <div class="right-list2">
                    <a href="" style="color:black;font-size:18px;line-height:40px; text-align: center;">
                        <p>商品收藏</p>
                    </a>
                </div>
            </li>
            <li><a href="#"><span class="zuji"></span></a>
                <div class="right-list3">
                    <a href="" style="color:black;font-size:18px;line-height:40px; text-align: center;">
                        <p>我的足迹</p>
                    </a>
                </div>
            </li>
        </ul>
        <ul class="right-nav-list-bottom">
            <li><a href="#"><span class="fankui"></span></a>
              <div class="right-list4">
                    <a href="" style="color:black;font-size:18px;line-height:40px; text-align: center;">
                        <p>会员反馈</p>
                    </a>
                </div>
            </li>
            <li><a href="#"><span class="backtotop"></span></a>
              <div class="right-list5">
                    <a href="" style="color:black;font-size:18px;line-height:40px; text-align: center;">
                        <p>回到顶部</p>
                    </a>
                </div>
            </li>
        </ul>
    </div>
    <main style="height:1000px;"></main>

</body>

</html>

<script>
    var banner = document.querySelector('.banner');
    var imgLis = document.querySelectorAll('.banner .img-list li');
    var indicators = document.querySelectorAll('.banner .indicator li');

    var index = 0;

    function showImg() {
        for (var i = 0; i < imgLis.length; i++) {

            imgLis[i].className = '';
            indicators[i].className = '';
        }

        imgLis[index].className = 'current';
        indicators[index].className = 'active';
        banner.style.backgroundColor = bgColorArr[index];
    }

    function prevImg() {
        index = index == 0 ? imgLis.length - 1 : index - 1;
        showImg();
    }

    function nextImg() {
        index = index == imgLis.length - 1 ? 0 : index + 1;
        showImg();
    }

    var timer = setInterval(nextImg, 1500);


    banner.onmouseover = function () {
        clearInterval(timer);
        timer = null;
    }
    banner.onmouseout = function () {
        timer = setInterval(nextImg, 1500);
    }

    for (var i = 0; i < indicators.length; i++) {
        indicators[i].index = i;
        indicators[i].onmouseover = function () {
            index = this.index;
            showImg();
        }
    }

    var backToTop = document.querySelector('.backtotop');
    backToTop.onmouseover = function () {
        document.documentElement.scrollTop =
            document.body.scrollTop = 0;
    }

    var nav = document.querySelector('.back');
    window.onscroll = function () {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log(scrollTop);

        if (scrollTop >= 120) {

            nav.style.position = 'fixed';
            nav.style.top = '0';
        } else {

            nav.style.position = 'static';
        }

    }
</script>